import { Menu, Dropdown, Typography, Divider, Button } from 'antd'
import { DownOutlined } from '@ant-design/icons'

import '@/styles/head-nav/head-nav-pc.css'
import ExploreOverlay from '@/components/head-nav/head-nav-overlay-explore-pc'

const { Text } = Typography

const HeadNavPC = () => {
  const menu = (
    <Menu>
      <Menu.Item>
        <Text>这里的排版和Explore一样，略。</Text>
      </Menu.Item>
    </Menu>
  )

  return (
    <>
      <Dropdown overlay={ExploreOverlay} className="margin-style">
        <Button
          type="link"
          style={{ height: '100%' }}
          className="ant-dropdown-link"
          onClick={(e) => e.preventDefault()}
        >
          Explore
          <DownOutlined />
        </Button>
      </Dropdown>

      <Dropdown overlay={menu} className="margin-style">
        <Button
          type="link"
          style={{ height: '100%' }}
          className="ant-dropdown-link"
          onClick={(e) => e.preventDefault()}
        >
          For Designers
          <DownOutlined />
        </Button>
      </Dropdown>

      <Divider type="vertical" />

      <Dropdown overlay={menu} className="margin-style">
        <Button
          type="link"
          style={{ height: '100%' }}
          className="ant-dropdown-link"
          onClick={(e) => e.preventDefault()}
        >
          Hiring Designers?
          <DownOutlined />
        </Button>
      </Dropdown>
    </>
  )
}

export default HeadNavPC
